<div class="container">
  <form novalidate (ngSubmit)="onSubmit()" [formGroup]="formCtrl">
    <!-- Every form Section is an Angular Component -->
    <div class="card mat-elevation-z2">
      <app-form-name [parentForm]="formCtrl"></app-form-name>

      <app-form-image
        [parentForm]="formCtrl"
        [images]="config?.image?.options"
        [readonly]="config?.image?.readOnly"
      ></app-form-image>

      <app-form-specs
        [parentForm]="formCtrl"
      ></app-form-specs>

      <app-form-gpus
        [parentForm]="formCtrl"
        [vendors]="config?.gpus?.value.vendors"
      ></app-form-gpus>

      <app-form-workspace-volume
        [parentForm]="formCtrl"
        [pvcs]="pvcs"
        [readonly]="config?.workspaceVolume?.readOnly"
        [defaultStorageClass]="defaultStorageclass"
      ></app-form-workspace-volume>

      <app-form-data-volumes
        [parentForm]="formCtrl"
        [pvcs]="pvcs"
        [readonly]="config?.dataVolumes?.readOnly"
        [defaultStorageClass]="defaultStorageclass"
      ></app-form-data-volumes>

      <app-form-affinity
        [parentForm]="formCtrl"
        [affinityConfigs]="config?.affinityConfig?.options"
      ></app-form-affinity>

      <app-form-tolerations
        [parentForm]="formCtrl"
        [tolerationGroups]="config?.tolerationGroup?.options"
      ></app-form-tolerations>

      <app-form-configurations
        [parentForm]="formCtrl"
      ></app-form-configurations>

      <app-form-advanced-options
        [parentForm]="formCtrl"
      ></app-form-advanced-options>
    </div>

    <!-- Action Buttons -->
    <button
      mat-raised-button
      color="accent"
      class="margin"
      type="submit"
      [disabled]="formCtrl.invalid"
    >
      LAUNCH
    </button>

    <a routerLink="/">
      <button mat-raised-button class="margin">CANCEL</button>
    </a>
  </form>
</div>
